<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8" />
	<title>购物车</title>
	<link type="text/css" th:href="@{/html/css/bootstrap.min.css}" rel="stylesheet" />
	<script type="text/javascript" th:src="@{/html/js/jquery-1.12.4.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/bootstrap.min.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/vue.min.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/axios.min.js}"></script>
	<style type="text/css">
		.mycss{
			color: red;
			background: #eee;
		}
	</style>
</head>
<body>
	<div id="app" class="container-fluid" style="margin-top: 10px;">
		<button v-on:click="list()">刷新</button>
		<input id="username" type="hidden" th:value="${session.user.username}" />
		<table class="table">
			<thead>
				<tr>
					<th>图片</th>
					<th>批号</th>
					<th>名称</th>
					<th>分类</th>
					<th>店铺</th>
					<th>原价</th>
					<th>售价</th>
					<th>计量</th>
					<th>库存</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-bind:class="item.gstatus==402?'mycss':''" v-for="item in items">
					<td><img v-bind:src="'/mymall/picture/'+item.gno" style="width: 80px; height: 70px;"></img></td>
					<td>{{item.gno}}</td>
					<td>{{item.gname}}</td>
					<td>{{item.gtype}}</td>
					<td>
						<img v-bind:src="'/mymall/logo/'+item.shopVO.user" style="width: 40px; height: 30px;"></img>
						{{item.shopVO.stitle}}
					</td>
					<td>&yen;{{item.gprice}}</td>
					<td>&yen;{{item.gsale}}</td>
					<td>{{item.gdesc}}</td>
					<td>{{item.gleft}}</td>
					<td>
						<button v-on:click="buy(item)">购买</button>
						<button v-on:click="del(item)">移除</button>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="modal modal-dialog fade" style="position: absolute;" id="mymodal">
             <div v-if="item!=null" class="modal-content">
                <div class="modal-header">
                     <h4>订单信息</h4>
                </div>
				<div class="modal-body" style="height:100px; margin-bottom: 10px;">
					<img v-bind:src="'/mymall/picture/'+item.gno" style="width: 80px; height: 70px;"></img>
					<span style="margin-right:30px;">{{item.gname}}</span>
					<span style="margin-right:30px;">剩余{{item.gleft}}</span>
					<span style="margin-right:30px;">单价&yen;{{item.gsale}}</span>
					<input type="button" v-on:click="minus()" value="-" />
					<span>{{count}}</span>
					<input type="button" v-on:click="plus()" value="+" />
					<span style="margin-left:30px;margin-right:30px; color:red; font-size: 20px; font-weight: bolder;">总价:&yen;{{sum}}</span>
					<input type="text" v-model="desc" placeholder="您有什么想补充的" class="form-control input-sm"></input>
				</div>	
				<div v-if="addrs!=null" class="modal-body" style="height:200px;">
					<table class="table">
						<thead>
							<tr>
								<th>选择</th>
								<th>发件人</th>
								<th>发件手机号</th>
								<th>收件人</th>
								<th>收件人手机号</th>
								<th>收件人地址</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="item in addrs">
								<td><input type="radio" name="rdoaddr" v-bind:value="item.addrid" v-bind:checked="item.addrdef"></input></td>
								<td>{{item.senduser}}</td>
								<td>{{item.sendphone}}</td>
								<td>{{item.receiveuser}}</td>
								<td>{{item.receivephone}}</td>
								<td>{{item.receiveaddr}}</td>
							</tr>
						</tbody>
						<tfoot>
							<tr>
								<td class="text-danger" colspan="6">请保证至少有一条收货地址信息</td>
							</tr>
						</tfoot>
					</table>
				</div>
                <div class="modal-footer">
                	<button type="button" class="btn btn-default" v-on:click="pay()">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
             </div>
        </div>
    </div>
    <script type="text/javascript">
    	new Vue({
    		el:'#app',
    		data:{
    			serviceUrl:'http://localhost:8001/myservice',
    			items:{},
    			item:null,
    			count:1,
    			sum:0,
    			desc:'',
    			addrs:null
    		},
    		beforeMount:function(){
    			this.list();
    			this.addrList();
    		},
    		methods:{
    			addrList:function(){
    				var url = this.serviceUrl+"/cust/list/addr/"+$("#username").val();
    				var self = this;
    				axios.defaults.withCredentials = true;
    				axios.get(url).then(function(res){
    					self.addrs = res.data;
    				});
    			},
    			list:function(){
    				var url = this.serviceUrl+"/cust/list/shopcar/"+$("#username").val();
    				var self = this;
    				axios.defaults.withCredentials = true;
    				axios.get(url).then(function(res){
    					self.items = res.data;
    				});
    			},
    			del:function(item){
    				if(confirm('是否确定移除商品 '+item.gname+" ?")){
	    				var url = this.serviceUrl+"/cust/del/shopcar/"+$("#username").val()+"/"+item.gno;
						var self = this;
						axios.defaults.withCredentials = true;
						axios.get(url).then(function(res){
							alert(res.data.message);
							if(res.data.code==200){
								self.list();
							}
	    				});	
    				}
    			},
				buy:function(item){
    				this.item=item;
    				this.count=1;
    				this.sum=item.gsale;
    				this.desc='';
    				$("#mymodal").modal("show");
    			},
    			minus:function(){
    				if(this.count>1){
    					this.count--;
    					this.sum=this.item.gsale*this.count;
    				}
    			},
    			plus:function(){
    				this.count++;
					this.sum=this.item.gsale*this.count;
    			},
    			pay:function(comm){
    				if($("input[name='rdoaddr']:checked").length==1){
    					var params = new URLSearchParams();
        				params.append("username",$("#username").val());
        				params.append("gno",this.item.gno);
        				params.append("addrid",$("input[name='rdoaddr']:checked").val());
        				params.append("count",this.count);
        				params.append("desc",this.desc);

        				var url = this.serviceUrl+"/cust/buy/order"
        				var self = this;
        				axios.defaults.withCredentials = true;
        				axios.post(url,params).then(function(res){
        					alert(res.data.message);
        					if(res.data.code==200){
        						self.list();
        						$("#mymodal").modal("hide");
        					}
        				});
    				}else{
    					alert("请确保收货地址信息 如果没有请先录入收货地址");
    				}
    			}
    		}
    	});
    </script>
</body>
</html>